<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="sureBtn"
            size="medium"
            @click="handleAdd"
          >
            新 增
          </el-button>
          <el-button
            type="danger"
            class="setBtn"
            icon="el-icon-delete"
            size="medium"
            @click="handleDelete"
          >
            删 除
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="main-content">
      <app-table
        :page-data="pageData"
        :table-columns="tableColumns"
        @current-change="handleCurrentChange"
        @handleCheckedRows="handleCheckedRows"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            :disabled="scope.row.status == 1"
            type="success"
            @click="handleRow(scope.row)"
          >
            {{ scope.row.status == 1 ? "已归来" : "归来"}}
          </el-button>
        </template>
      </app-table>
    </div>
    <el-dialog
      title="添加外出记录信息"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <el-form
          :key="key"
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="老人名称" prop="e_id">
                <el-select
                  v-model="formData.e_id"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading">
                  <el-option
                    v-for="item in oldoptions"
                    :key="item.base.id"
                    :label="item.base.name"
                    :value="item.base.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="是否与家人沟通" prop="notified">
                <el-select
                  v-model="formData.notified"
                  size="medium"
                  clearable
                  placeholder="请选择是否与家人沟通"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="已沟通" :value="1"></el-option>
                  <el-option :key="1" label="未沟通" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="是否有人随同" prop="type">
                <el-select
                  v-model="formData.type"
                  size="medium"
                  clearable
                  placeholder="请选择是否有人随同"
                  filterable
                  style="width: 100%;"
                >
                  <el-option :key="0" label="独自离院" :value="1"></el-option>
                  <el-option :key="1" label="护工随同" :value="2"></el-option>
                  <el-option :key="2" label="监护人接送" :value="3"></el-option>
                  <el-option :key="3" label="监护人接送" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="联系方式" prop="mobile">
                <el-input
                  v-model="formData.mobile"
                  placeholder="请输入联系方式"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="离院时间" prop="out_time">
                <el-date-picker
                  v-model="formData.out_time"
                  value-format="yyyy-MM-dd"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择离院时间"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="离院缘由" prop="cause">
                <el-input v-model="formData.cause" type="textarea" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="备注" prop="comments">
                <el-input v-model="formData.comments" type="textarea" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="medium" @click="save">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="medium"
            @click="cancel('formData')"
          >
            取 消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import appTable from "@/components/AppTable/index";
  import { handelderwaichu, eldersearch } from "@/api/visitleave.js";
  import { parseTime } from "@/utils";
  export default {
    name: "Oldleave",
    components: { appTable },
    data() {
      return {
        key: Math.random(),
        dialogVisible: false,
        formData: {},
        currentSelectedData: [],
        pageData: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
        oldoptions: [],
        loading: false,
        tableColumns: [
          { prop: "name", label: "老人姓名" },
          { prop: "sex", label: "性别", formatter: this.sexformatter },
          { prop: "age", label: "年龄" },
          { prop: "mobile", label: "联系电话" },
          { prop: "id_card", label: "身份证号" },
          { prop: "out_time", label: "外出时间", formatter: this.leaveformatter },
          {
            prop: "type",
            label: "是否有人随同",
            formatter: this.typeformatter
          },
          {
            prop: "status",
            label: "当前状态",
            formatter: this.formatter
          },
        ],
        rules: {
          notified: [{ required: true, message: "请选择是否与家人沟通", trigger: "blur" }],
          type: [{ required: true, message: "请选择是否有人跟随", trigger: "blur" }],
          e_id: [{ required: true, message: "请输入老人信息", trigger: "blur" }],
          mobile: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
          cause: [{ required: true, message: "请输入离院缘由", trigger: "blur" }],
          out_time: [{ required: true, message: "请选择外出时间", trigger: "blur" }],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getTableData();
    },
    methods: {
      sexformatter(row) {
        if(row.sex == 1) {
          return "男"
        } else {
          return "女"
        }
      },
      leaveformatter(row, column) {
        if (row.out_time == 0) {
          return "";
        }
       return parseTime(row.out_time, "{y}-{m}-{d}")
      },
      formatter(row, column) {
        if (row.status == 0) {
          return "外出中";
        } else if (row.status == 1) {
          return "已归来";
        }
      },
      typeformatter(row) {
        if (row.type == 1) {
          return "独自离院";
        } else if (row.type == 2) {
          return "护工随同";
        } else if (row.type == 3) {
          return "监护人接送";
        } else if(row.type == 4) {
          return "其他";
        }
      },
      timeformatter(row) {
        if(row.coming_time) {
         return parseTime(row.coming_time, "{y}-{m}-{d}")
        }
        return row.coming_time
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          eldersearch("get", {name: query}).then(res => {
            this.loading = false;
            this.oldoptions = res.data;
          })
        } else {
          this.oldoptions = [];
        }
      },
      getTableData(data) {
        handelderwaichu("get", data).then((resp) => {
          if (resp.code === 200) {
            this.pageData = resp.data;
            this.$set(this.pageData, "type", -1);
          }
        });
      },
      handleAdd() {
        this.key = Math.random();
        this.dialogVisible = true;
        this.formData = {};
      },
      save(data) {
        this.$refs["formData"].validate(async (valid) => {
          if (valid) {
            handelderwaichu("post", this.formData).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "添加成功",
                });
                this.dialogVisible = false;
                this.getTableData();
                this.cancel("formData");
              }
            });
          }
        });
      },
      handleRow(row) {
        this.$confirm("确定设置为离开状态, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              handelderwaichu("put", {
                id: row.id,
              }).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "设置成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
      },
      cancel() {
        this.dialogVisible = false;
      },
      handleCheck() {
        this.key = Math.random();
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要查看的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能查看一条内容",
            type: "warning",
          });
        } else {
          this.dialogVisibleForm = true;
          this.formData = Object.assign({}, this.currentSelectedData[0]);
        }
      },
      handleDelete() {
        if (this.currentSelectedData.length === 0) {
          this.$message({
            message: "请选择一条您要删除的内容",
            type: "warning",
          });
        } else if (this.currentSelectedData.length > 1) {
          this.$message({
            message: "一次只能删除一条内容",
            type: "warning",
          });
        } else {
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.formData = Object.assign({}, this.currentSelectedData[0]);
              let param = {
                id: this.formData.id,
              };
              handelderwaichu("delete", param).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getTableData();
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      handleCheckedRows(rows) {
        if (rows && rows instanceof Array && rows.length > 0) {
          this.currentSelectedData = rows;
        } else {
          this.currentSelectedData = [];
        }
      },
      handleCurrentChange(val) {
        let param = {
          page: val,
        };
        this.getTableData(param);
      },
      closeDialog() {
        this.dialogVisible = false;
        this.getTableData();
      },
    },
  };
</script>
<style lang="scss" scoped>
::v-deep{
  .el-select{
    width: 100%;
  }
}
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        width: 100%;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }
    }

    .form-footer {
      padding-left: 100px;
    }
  }
</style>
